<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>地区销量地图</title>
    <script src="https://assets.pyecharts.org/assets/v5/echarts.min.js"></script>
    <script src="https://assets.pyecharts.org/assets/v5/maps/china.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        .search-container {
            margin: 20px;
            text-align: center;
            position: relative;
            max-width: 400px;
            margin: 20px auto;
            display: flex;
            align-items: center;
        }

        #search-input {
            padding: 12px 15px;
            flex: 1;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
            box-sizing: border-box;
            outline: none;
            transition: border-color 0.3s;
        }

        #search-input:focus {
            border-color: #007BFF;
        }

        #search-button {
            padding: 12px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            margin-left: 10px;
            transition: background-color 0.3s;
        }

        #search-button:hover {
            background-color: #0056b3;
        }

        .search-results {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            z-index: 100;
            margin-top: 5px;
            display: none;
        }

        .search-result-item {
            padding: 10px 15px;
            text-align: left;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .search-result-item:hover {
            background-color: #f0f0f0;
        }

        #map-container {
            width: 90%;
            height: 800px;
            margin: 0 auto;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        #bar-chart-container {
            width: 90%;
            height: 400px;
            margin: 20px auto;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>

<body>
    <div class="search-container">
        <input type="text" id="search-input" placeholder="输入地区名称（如：北京、内蒙古）">
        <div class="search-results" id="search-results"></div>
        <button id="search-button">搜索</button>
    </div>
    <div id="map-container"></div>
    <div id="bar-chart-container"></div>

    <script>
        var chart = echarts.init(document.getElementById('map-container'));
        var barChart = echarts.init(document.getElementById('bar-chart-container'));

        // 地图数据
        var mapData = [
            { name: '上海市', value: 746092.0 },
            { name: '云南省', value: 730639.0 },
            { name: '内蒙古自治区', value: 729930.5 },
            { name: '北京市', value: 718991.8 },
            { name: '台湾', value: 713833.5 },
            { name: '吉林省', value: 737855.3 },
            { name: '四川省', value: 758639.6 },
            { name: '天津市', value: 719648.7 },
            { name: '宁夏回族自治区', value: 737248.5 },
            { name: '安徽省', value: 741074.9 },
            { name: '山东省', value: 714305.8 },
            { name: '山西省', value: 695505.6 },
            { name: '广东省', value: 713037.2 },
            { name: '广西壮族自治区', value: 617474.2 },
            { name: '新疆维吾尔自治区', value: 726074.7 },
            { name: '江苏省', value: 755828.1 },
            { name: '江西省', value: 745353.6 },
            { name: '河北省', value: 707496.2 },
            { name: '河南省', value: 722938.6 },
            { name: '浙江省', value: 718757.7 },
            { name: '海南省', value: 712469.3 },
            { name: '湖北省', value: 744338.5 },
            { name: '湖南省', value: 738072.8 },
            { name: '澳门特别行政区', value: 723847.6 },
            { name: '甘肃省', value: 700472.8 },
            { name: '福建省', value: 718560.7 },
            { name: '西藏自治区', value: 728437.5 },
            { name: '贵州省', value: 725823.2 },
            { name: '辽宁省', value: 752673.9 },
            { name: '重庆市', value: 755258.4 },
            { name: '陕西省', value: 758691.9 },
            { name: '青海省', value: 738280.5 },
            { name: '香港特别行政区', value: 706005.0 },
            { name: '黑龙江省', value: 728644.6 }
        ];

        // 地图基础配置
        var baseOption = {
            backgroundColor: 'white',
            title: {
                text: '各省市自治区电动汽车销量分布',
                left: 'center',
                textStyle: { color: 'black' }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c}'
            },
            visualMap: {
                type: 'continuous',
                min: 617474.2,
                max: 758691.9,
                inRange: { color: ['#E0F7FA', '#01579B'] },
                textStyle: { color: 'black' }
            },
            series: [
                {
                    type: 'map',
                    map: 'china',
                    label: { show: true, color: 'black' },
                    data: mapData,
                    // 新增选中样式
                    itemStyle: {
                        normal: {},
                        emphasis: {
                            areaColor: '#FFA500'
                        },
                        selected: {
                            areaColor: '#FFA500'
                        }
                    },
                    // 支持多选
                    selectedMode: 'multiple'
                }
            ]
        };

        chart.setOption(baseOption);

        // 搜索功能
        document.getElementById('search-button').addEventListener('click', function () {
            searchRegions();
        });

        // 搜索框输入事件
        document.getElementById('search-input').addEventListener('input', function () {
            showSearchResults(this.value);
        });

        // 点击其他区域关闭下拉列表
        document.addEventListener('click', function (event) {
            var searchContainer = document.querySelector('.search-container');
            if (!searchContainer.contains(event.target)) {
                document.getElementById('search-results').style.display = 'none';
            }
        });

        // 显示搜索结果下拉列表
        function showSearchResults(keyword) {
            var resultsContainer = document.getElementById('search-results');
            resultsContainer.innerHTML = '';

            if (!keyword) {
                resultsContainer.style.display = 'none';
                return;
            }

            var matchedRegions = [];
            for (var i = 0; i < mapData.length; i++) {
                if (mapData[i].name.indexOf(keyword) !== -1) {
                    matchedRegions.push(mapData[i]);
                }
            }

            if (matchedRegions.length > 0) {
                matchedRegions.forEach(function (region) {
                    var item = document.createElement('div');
                    item.className = 'search-result-item';
                    item.textContent = region.name;
                    item.addEventListener('click', function () {
                        document.getElementById('search-input').value = region.name;
                        resultsContainer.style.display = 'none';
                        searchRegions();
                    });
                    resultsContainer.appendChild(item);
                });
                resultsContainer.style.display = 'block';
            } else {
                resultsContainer.style.display = 'none';
            }
        }

        // 执行搜索
        function searchRegions() {
            var searchInput = document.getElementById('search-input').value.trim();
            if (!searchInput) {
                alert('请输入地区名称');
                return;
            }

            // 清除之前的标记点
            clearPreviousMarks();

            var foundRegions = [];

            // 模糊匹配
            for (var i = 0; i < mapData.length; i++) {
                if (mapData[i].name.indexOf(searchInput) !== -1) {
                    foundRegions.push(mapData[i]);
                }
            }

            // 处理搜索结果
            if (foundRegions.length > 0) {
                // 添加标记点
                baseOption.series[0].data = foundRegions; // 只显示匹配的地区
                chart.setOption(baseOption);

                // 高亮显示第一个匹配的地区
                var firstIndex = mapData.findIndex(item => item.name === foundRegions[0].name);
                if (firstIndex !== -1) {
                    chart.dispatchAction({
                        seriesIndex: 0,
                        dataIndex: firstIndex
                    });
                }
            } else {
                alert(
                    '未找到包含 "' +
                    searchInput +
                    '" 的地区\n\n支持的地区：\n' +
                    mapData.map(item => item.name).join('、')
                );
            }
        }

        // 清除之前的标记点
        function clearPreviousMarks() {
            baseOption.series[0].data = mapData; // 恢复所有地区
            chart.setOption(baseOption);
        }

        // 存储已选择的地区
        var selectedRegions = [];

        // 监听地图点击事件
        chart.on('click', function (params) {
            var regionName = params.name;
            var regionValue = params.value;

            // 检查地区是否已选择
            var index = selectedRegions.findIndex(item => item.name === regionName);

            if (index === -1) {
                // 未选择，添加到已选择列表
                selectedRegions.push({ name: regionName, value: regionValue });
                // 选中地图上的地区
                chart.dispatchAction({
                    type: 'select',
                    seriesIndex: 0,
                    name: regionName
                });
            } else {
                // 已选择，从已选择列表中移除
                selectedRegions.splice(index, 1);
                // 取消选中地图上的地区
                chart.dispatchAction({
                    type: 'unselect',
                    seriesIndex: 0,
                    name: regionName
                });
            }

            // 更新条形图
            updateBarChart();
        });

        // 更新条形图
        function updateBarChart() {
            var xData = [];
            var yData = [];

            selectedRegions.forEach(function (region) {
                xData.push(region.name);
                yData.push(region.value);
            });

            var barChartOption = {
                backgroundColor: 'white',
                title: {
                    text: '各地区销量对比条形图',
                    left: 'center',
                    textStyle: { color: 'black' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: xData
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        type: 'bar',
                        data: yData
                    }
                ]
            };

            barChart.setOption(barChartOption);
        }
    </script>
</body>

</html>